<template>
	<view style="">
		<!-- 宝贝橱窗 -->
		<view style="display: flex;">
			<!-- 第一列 -->
			<view style="width: 50%;">
				<template v-for="(good, index) in goods">
					<view @click="toBaoBeiPage(index)" v-if="index%2 == 0" style="margin: 10px auto; width: 95%;">
						<!-- 图片 -->
						<view style="width: 100%; height: 200px; border-radius: 10px; overflow: hidden;">
							<view style="display: flex; justify-content: center; align-items: center;">
								<u--image :src="good.img" height="200px"></u--image>
							</view>
								
							<!-- 是否已卖出判断 -->
							<view v-if="good.soldOut == 'true'" style="display: flex; justify-content: center; align-items: center;
								position: relative; top: -100%;">
							 	<u--image :src="soldOutImg" height="200px"></u--image>
							</view>
						</view>
						
						<!-- 标题 -->
						<view class="u-demo-block">
							<view class="u-demo-block__content">
								<u--text :lines="2" :text="good.description" size="14" bold></u--text>
							</view>
						</view>
						<!-- 价格 -->
						<view class="u-demo-block">
							<view class="u-demo-block__content">
								<view class="u-page__text-item">
									<u--text mode="price" :text="good.price" size="18" bold color="#e45656"></u--text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>

			<!-- 第二列 -->
			<view style="width: 50%;">
				<template v-for="(good, index) in goods">
					<view @click="toBaoBeiPage(index)" v-if="index%2 != 0" style="margin: 10px auto; width: 95%;">
						<!-- 图片 -->
						<view style="width: 100%; height: 200px; border-radius: 10px; overflow: hidden;">
							<view style="display: flex; justify-content: center; align-items: center;">
								<u--image :src="good.img" height="200px"></u--image>
							</view>
								
							<!-- 是否已卖出判断 -->
							<view v-if="good.soldOut == 'true'" style="display: flex; justify-content: center; align-items: center;
								position: relative; top: -100%;">
							 	<u--image :src="soldOutImg" height="200px"></u--image>
							</view>
						</view>
						<!-- 标题 -->
						<view class="u-demo-block">
							<view class="u-demo-block__content">
								<u--text :lines="2" :text="good.description" size="14" bold></u--text>
							</view>
						</view>
						<!-- 价格 -->
						<view class="u-demo-block">
							<view class="u-demo-block__content">
								<view class="u-page__text-item">
									<u--text mode="price" :text="good.price" size="18" bold color="#e45656"></u--text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>

		</view>
		
		<view style="width: 100%; text-align: center; margin: 10px;">
			<text>没有更多了 ~ </text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				soldOutImg: 'http://119.29.2.163:9000/xiaomayi/img%2Ficon%2FSold_Out.png',
				goods: []
			}
		},
		props: [
			'getUserId',
		],
		methods: {
			toBaoBeiPage(index) {
				let that = this;
				// console.log(index)
				uni.navigateTo({
					url: '/pages/BaoBeiPage/BaoBeiPage?goodId=' + that.goods[index].id
				});
			},
			getGoods() {
				let that = this;
				uni.request({
					method: 'GET',
					url: getApp().globalData.url + '/good/getGoods?userId=' + this.userId,
					success(res) {
						that.goods = res.data;
					}
				})
			}
		},
		mounted() {
			this.userId = this.$props.getUserId;
			
			this.getGoods();
		}
	}
</script>

<style>

</style>